<template>
  <div v-title data-title="设置" class="setting-container">
    <ul class="list-container">
      <router-link :to="{name: 'about'}" tag="li">
        <div class="item-ct border-bottom">
          <span class="item-title">关于我们</span>
          <img class="icon-go" src="/static/img/ic_go.png"/>
        </div>
      </router-link>
      <li @click="exit">
        <div class="item-ct">
          <span class="item-title">退出登录</span>
          <img class="icon-go" src="/static/img/ic_go.png"/>
        </div>
      </li>
    </ul>
    <sign-out :content="alertContent" ref="signOut"></sign-out>
  </div>

</template>
<script>
  import {mapState} from 'vuex'
  import signOut from '@/components/alertModal.vue'
  export default {
    name:'setting',
    computed: {
      ...mapState({
        token: 'token'
      })
    },
    data(){
      return{
        alertContent:{
          title:'退出确认',
          content:'确认要退出当前账号吗?',
          cancelButton:'取消',
          confirmButton:'确认'
        }
      }
    },
    components: {
      signOut
    },
    methods:{
      exit () {
        this.$refs.signOut.confirm().then((res) => {
          if (res === 'confirm') {
            localStorage.clear()
            this.$store.commit('changeUserTel', '')
            this.$store.commit('changeUserToken', '')
            this.$router.push('/login')
          }
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .setting-container
    background-color #F4F4F4
    position absolute
    top 0
    right 0
    left 0
    bottom 0
    .list-container
      margin-top 0.16rem
      position relative
      overflow hidden
      .divide-line
        background-color $bgColor
        height .16rem
      li
        background-color white
        display: flex
        align-items: center
        .item-ct
          width 100%
          margin:0 .4rem 0 .4rem
          display: flex
          align-items: center
          justify-content: space-between
          .item-title
            color: #333333
          .icon-go
            width: .48rem
            height: .48rem
            margin: .34rem 0;
</style>
